<template>
  <div class="login_box">
    <div></div>
    <div class="login_form_box">
      <div class="login_left">
        <div class="display_flex align_items_center justify_content_center">
          <img class="bjimg" src="../assets/images/bj.jpg" alt="" />
        </div>
      </div>
      <div class="login_right">
        <div class=" display_flex align_items_center justify_content_center login_title">
          <img class="imgstyle" src="../assets/images/logo.png" alt="" />
        </div>
        <div class="logfrom">
          <div class="goodLogin">欢迎登录</div>
          <div class="margin_top_30 width_60">
            <el-input v-model="account" clearable placeholder="请输入账号" size="medium" value></el-input>
          </div>
          <div class="margin_top_30 width_60">
            <el-input v-model="password" show-password size="medium" placeholder="请输入密码"></el-input>
          </div>
          <div class="width_40 margin_top_30">
            <el-button type="primary" @click="onSubmit" class="btn">登录</el-button>
          </div>
        </div>
        <!-- <div class="hanhui">
          北京汉汇科技有限公司<span style="color: #00b7ee; margin-left: 10px"
            >版权所有</span
          >
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { get, post, tipsFun } from '../util/request.js'
export default {
  name: 'login',
  data() {
    return {
      msg: '',
      account: '',
      password: ''
    }
  },
  show() {
    console.log(a)
  },
  methods: {
    onSubmit() {
      this.$router.push({
        name: 'index'
      })
      return;


      if (!this.account) {
        this.$message('请输入账号')
        return
      }
      if (!this.password) {
        this.$message('请输入密码')
        return
      }
      var params = new URLSearchParams()
      params.append('client', 'pc')
      params.append('username', this.account)
      params.append('password', this.password)
      post('/login/login', params)
        .then(response => {
          console.log(response)
          if (response.code == 200) {
            if (response.data.access_token) {
              window.sessionStorage.setItem(
                'access_token',
                response.data.access_token
              )
              window.sessionStorage.setItem('uid', response.data.id)
              window.sessionStorage.setItem(
                'infoData',
                JSON.stringify(response.data)
              )
            }
            this.$bus.emit('lowerRight', 'success')
            this.$router.push({
              name: 'index'
            })
          } else {
            tipsFun(this, 'error', response.error.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

<style scoped>
.bjimg {
  width: 100%;
  height: 100%;
}

.hanhui {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #2c70ff;
  line-height: 30px;
  text-align: center;
}

.imgstyle {
  display: block;
  width: 229px;
  height: 70px;
  font-size: 83px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  /* color: #397bd2; */
  line-height: 8px;
  margin-top: 180px;
}

.width_40 {
  width: 480px;
  height: 50px;
  background: #2c70ff;
}

.margin_top_30 {
  /* margin: 0 auto; */
  width: 480px;
  background: #f4f6f8;
}

.logfrom {
  /* background-color: blue; */
  /* padding-left: 60px; */
  padding: 0px 60px;
}

.login_box {
  width: 100%;
  height: 100%;
  /* background: url('../assets/images/bj.jpg') no-repeat; */
  /* background-image: url('../assets/images/login/bg.jpg'); */
  /* background-size: 100% 100%; */
}

.login_form_box {
  /* width: 60%; */
  /* height: 100%; */
  /* margin: 0 auto; */
  display: flex;
  align-items: center;
  box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
  border-radius: 14px;
}

.login_left {
  width: 1320px;
  height: 1080px;
  /* flex: 1; */
  /* background: red; */
  /* background: url('../assets/images/bj.jpg') no-repeat; */
  /* background-size: cover; */
  /* background-size: 100% 100%; */
  border-radius: 14px 0 0 14px;
}

.login_left div {
  /* background-color: black; */
  height: 100%;
  font-size: 32px;
  font-weight: bold;
  color: #fff;
}

.login_right {
  width: 600px;
  height: 1080px;
  background: #ffffff;
  border-radius: 0 14px 14px 0;
}

.login_title {
  /* margin-top: 180px;
  width: 229px;
  height: 70px; */

  text-align: center;
}

.goodLogin {
  width: 88px;
  height: 22px;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #323232;
  line-height: 30px;
  margin-top: 79px;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #323232;
}

.btn {
  width: 480px;
  padding: 15px 0 !important;
  background-color: #2c70ff;
  font-size: 18px;
}
</style>
